<template>
	<view>
		<u-navbar :border-bottom='false' back-icon-size='50' title="游览历史" :background="background" title-color="#FFFFFF"
			back-icon-color="#FFFFFF">
			<view slot='right' style="padding-right: 32rpx;font-size: 14px;color: #FFFFFF;" @click="showModel=true">
				清空
			</view>
		</u-navbar>
		<view class="history">
			<view class="history-ul">
				<view class="history-li">
					<view class="date">
						今天
					</view>
					<view class="item">
						<image class="icon" src="../../../static/imgs/del/faxiandel.png" mode=""></image>
						<view class="info">
							<view class="tit">
								深圳罗湖希尔顿酒店
							</view>
							<view class="rate">
								<image class="zuan" src="../../../static/imgs/zuanshi.png" mode=""></image>
								<image class="zuan" src="../../../static/imgs/zuanshi.png" mode=""></image>
								<image class="zuan" src="../../../static/imgs/zuanshi.png" mode=""></image>
								<image class="zuan" src="../../../static/imgs/zuanshi.png" mode=""></image>
								<image class="zuan" src="../../../static/imgs/zuanshi.png" mode=""></image>
								<text>02-25至3-12入住</text>
							</view>
							<view class="price">
								<text style="font-size: 24rpx;color: #F16026;">¥</text>
								<text style="font-size: 32rpx;color: #F16026;">1268</text>
								起
							</view>
						</view>
					</view>
				</view>
				<view class="history-li">
					<view class="date">
						02月20日
					</view>
					<view class="item">
						<image class="icon" src="../../../static/imgs/del/faxiandel.png" mode=""></image>
						<view class="info">
							<view class="tit">
								深圳罗湖希尔顿酒店
							</view>
							<view class="rate">
								<image class="zuan" src="../../../static/imgs/zuanshi.png" mode=""></image>
								<image class="zuan" src="../../../static/imgs/zuanshi.png" mode=""></image>
								<image class="zuan" src="../../../static/imgs/zuanshi.png" mode=""></image>
								<image class="zuan" src="../../../static/imgs/zuanshi.png" mode=""></image>
								<image class="zuan" src="../../../static/imgs/zuanshi.png" mode=""></image>
								<text>02-25至3-12入住</text>
							</view>
							<view class="price">
								<text style="font-size: 24rpx;color: #F16026;">¥</text>
								<text style="font-size: 32rpx;color: #F16026;">1268</text>
								起
							</view>
						</view>
					</view>
				</view>
			</view>
			
			
			
		</view>
		<u-modal v-model="showModel" :content="content" title='清空游览历史' show-cancel-button @confirm="confirmFn"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content:'足迹抹去将无法再寻，确认抹去?',
				showModel:false,
				background: {
					backgroundColor: '#3587F7'
				}
			}
		},
		methods:{
			// 确认清楚
			confirmFn(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.history {
		width: 100%;
		height: auto;

		.history-ul {
			.history-li {
				.date {
					width: 100%;
					height: 64rpx;
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					line-height: 64rpx;
					color: #999999;
					padding-left: 28rpx;
				}

				.item {
					width: 100%;
					height: 200rpx;
					background-color: #FFFFFF;
					padding: 18rpx 28rpx;
					display: flex;

					.icon {
						width: 120rpx;
						height: 160rpx;
					}

					.info {
						margin-left: 32rpx;
						display: flex;
						flex-direction: column;
						.tit {
							font-size: 28rpx;
							font-family: Segoe UI;
							font-weight: 400;
							color: #333333;
						}

						.rate {
							display: flex;
							align-items: center;
							margin-top: 54rpx;
							.zuan {
								width: 20rpx;
								height: 20rpx;
							}

							text {
								font-size: 24rpx;
								font-family: Segoe UI;
								font-weight: 400;
								color: #999999;
							}
						}

						.price {
							font-size: 24rpx;
							font-family: Segoe UI;
							font-weight: 400;
							color: #999999;
							margin-top: auto;
						}
					}
				}
			}
		}
	}
</style>
